<template>
  <div class="">
    <p-modal
      title="新增班组"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

        <p-form-model-item ref="workroomid" label="车间" prop="workroomid">

          <p-select
            show-search
            placeholder="Select a person"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            v-model="form.workroomid"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="workRoomChange"
          >
            <p-select-option  v-for="(item, index) in workRoomList" :key="index" :value="item.id + ''">
              {{item.wpname }}
            </p-select-option>

          </p-select>

        </p-form-model-item>

        <p-form-model-item ref="classno" label="班组编码" prop="classno">
          <p-input
            v-model="form.classno"
          />
        </p-form-model-item>

        <p-form-model-item ref="classno" label="班组名称" prop="classno">
          <p-input
            v-model="form.classname"
          />
        </p-form-model-item>

        <p-form-model-item ref="classdescription" label="班组描述" prop="classdescription">
          <p-input
            v-model="form.classdescription"
          />
        </p-form-model-item>


        <p-form-model-item ref="lineid" label="线体" prop="lineid">

          <p-select
            show-search
            placeholder="Select a person"
            option-filter-prop="children"
            style="width: 200px"
            v-model="form.lineid"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="lineChange"
          >
            <p-select-option  v-for="(item, index) in lineList" :key="index" :value="item.id + ''">
              {{item.wpname}}
            </p-select-option>

          </p-select>
        </p-form-model-item>


      </p-form-model>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";


export default {
  data() {
    return {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 12
      },
      visible: false,
      confirmLoading: false,
      form: {
        workroomid: '',
        classno: '',
        classname: '',
        classdescription: '',
        lineid: ''
      },      
      rules: {
        workroomid: [
          { required: true, message: '请选择车间', trigger: 'blur' },
        ],
        classno: [
          { required: true, message: '请输入班组编码', trigger: 'blur' },
        ],
        classname: [
          { required: true, message: '请输入班组名称', trigger: 'blur' },
        ],
        classdescription: [
          { required: true, message: '请输入班组描述', trigger: 'blur' },
        ],
        lineid: [
          { required: true, message: '请选择线体', trigger: 'blur' },
        ],
      },
      workRoomList: [],
      lineList: [],
      url: {
        add: '/mes-manpower/mesHrClassLineInfo',  // 新增班组信息详情
        edit: '/mes-manpower/mesHrClassLineInfo', // 编辑
        workRoomList: '/basic-business/mesBaArchitecture/workRoomList', // 车间列表
        lineList: '/basic-business/mesBaArchitecture/childList', // 线体列表 工厂架构维护-获取子数据
      },
      state: 'add'
    };
  },
  mounted() {},
  methods: {
    getWorkRoomList(){
      getAction(this.url.workRoomList).then( res => {
        if(res.success) {
          this.workRoomList = res.data
        }
      } )
    },


    getlineListKeys(pid){
      const params = {
        locationType: 2,
        pid
      }
      getAction(this.url.lineList, params).then( res => {
        if(res.success) {
          console.log(res);
          this.lineList = res.data
        }
      } )
    },

    showModal(record) {
      this.visible = true;
      if(record) {
        this.state = 'edit'
        this.form.workroomid = record.workroomid
        this.form.classno = record.classno
        this.form.classname = record.classname
        this.form.classdescription = record.classdescription
        this.form.lineid = record.lineid
        this.form.id = record.id
        this.getlineListKeys(this.form.workroomid)
      } else {
        this.state = 'add'
      }
      this.getWorkRoomList()
    },
    handleOk(e) {
      this.confirmLoading = true;

      this.$refs.ruleForm.validate(valid => {
        if (valid) {

          let workroomname, workroomno, linename, lineno;

          this.workRoomList.forEach(ele => {
            if(this.form.workroomid == ele.id) {
              workroomname = ele.wpname
              workroomno = ele.wpno
            }
          } )

          this.lineList.forEach(ele => {
            if(this.form.lineid == ele.id) {
              linename = ele.wpname
              lineno = ele.wpno
            }
          } )

          const params = {
            ...this.form,
            workroomname,
            workroomno,
            linename,
            lineno
          }

          if(this.state == 'add' ) {

            postAction(this.url.add, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })

          }

          if( this.state == 'edit' ){         
            putAction(this.url.edit, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }



        } else {
          this.confirmLoading = false;

          return false;
        }
      });


    },
    handleCancel(e) {
      this.visible = false;
    },

    workRoomChange(value) {

      this.getlineListKeys(value)
      this.form.lineid = ''

    },
    lineChange(value) {
      

    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },


  },
  components: {},
};
</script>

<style lang="less" scoped>
</style>
